<template>
  <Modal
    v-model="config"
    width="580"
    class="modal-tips"
    :mask-closable="false"
    draggable
    :sticky="true"
    footer-hide
    title="查看申请信息"
    @on-cancel="cancel"
  >
    <div v-if="info" class="modal-main">
      <div class="flx-row-s-c">
        <span class="title c-black f-14">姓名</span>
        <span class="content c-black f-14">{{ info.username }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">会员ID(手机号)</span>
        <span class="content c-black f-14">{{ info.account }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">Email</span>
        <span class="content c-black f-14">{{ info.email }}</span>
      </div>
      <div v-if="info.wxNum" class="flx-row-s-c">
        <span class="title c-black f-14">微信号</span>
        <span class="content c-black f-14">{{ info.wxNum }}</span>
      </div>
      <div v-if="info.company" class="flx-row-s-c">
        <span class="title c-black f-14">公司名称</span>
        <span class="content c-black f-14">{{ info.company }}</span>
      </div>
      <div v-if="info.province || info.city" class="flx-row-s-c">
        <span class="title c-black f-14">国家/地区</span>
        <span class="content c-black f-14"
          >{{ info.country }}/{{
            info.country + "/" + info.province
              ? info.province + "/" + info.city
              : info.city
          }}</span
        >
      </div>
      <div v-if="info.address" class="flx-row-s-c">
        <span class="title c-black f-14">详细地址</span>
        <span class="content c-black f-14">{{ info.address }}</span>
      </div>
      <div v-if="info.sld" class="flx-row-s-c">
        <span class="title c-black f-14">免费二级域名</span>
        <span class="content c-black f-14">{{ info.sld }}</span>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  methods: {
    cancel() {
      this.config = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;
  max-height: 500px;
  overflow-x: auto;

  .title {
    width: 150px;
    text-align: right;
    margin-right: 10px;
    flex-shrink: 0;

    &::after {
      content: ":";
    }
  }
  .content {
    width: 100%;
  }
}
.modal-main > div {
  margin: 8px;
}
</style>
